<template>
<!--    定义对象类型时，需要.value-->
    <div>
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>联系方式：{{ tel }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">展示电话</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {ref} from "vue";

let name = ref('张三')
let age = ref(18)
let tel = '121u829172'
let address = '河南洛阳'

function changeName() {
    name.value = 'zs'
}
function changeAge() {
    age.value += 1
}
function showTel() {
    alert(tel)
}
</script>

<style scoped>

</style>
